<template>
<!-- 日志 -->
<div class="jiankong">
  <div class="title">
    <span style="font-size:12px;" @click="showDateTime">{{startTime+"  "+getMyDay(startTime)}}</span>
    <span class="iconfont icon-sousuo" @click="showSearch"></span>
  </div>
  <div class="note">
    <div class="lineBox">
      <div class="line" v-for="i in 5" :class="{ more : i == 1 }">
        <div class="round" @click="showMore(i)">
          <span class="iconfont icon-shangjiantou" v-if="i == 1"></span>
        </div>
      </div>
    </div>

    <div class="note-item" v-for="(item,index) in dataList" :key="index">
      <div class="date">
        <p>{{getCreateTime1(item)}}</p>
        <p>{{getCreateTime2(item)}}</p>
      </div>

      <div class="note-content">
        <span class="type">
            {{"["+getEvent(item)+"]"}}
        </span>
        <span>{{getThings(item)}}</span>
      </div>
    </div>
  </div>
  <div class="zhezhao" v-show="isSearch">
    <div class="search-tiaojian">
      <ul>
        <li @click="show('all')">全部</li>
        <li @click="show('open')">开门</li>
        <li @click="show('danger')">报警</li>
        <li @click="show('tip')">提醒</li>
        <li @click="show('un')">安防</li>
      </ul>
    </div>
  </div>
</div>
</template>
<script>
import "../iconfont/iconfont.css";
export default {
  data: function() {
    return {
      isSearch: false,
      dataList: [],
      startTime: "",
      endTime: "",
      pageNum: 1,
      pageSize: 5,
      flag: true,
      eventType: "all",
      userArray: null,
      beginTime: ""
    };
  },
  watch: {
    startTime: function(oldValue, newValue) {
      this.getDataList("again");
    }
  },
  mounted: function() {
    //首先判断 是否绑定
    this.$IsBind(
      () => {
        this.$vux.alert.show({
          title: "尚未绑定智能锁",
          content: "跳转到设备绑定界面",
          onHide: () => {
            this.$router.push({
              path: "/main/bind"
            });
          }
        });
      },
      () => {
        //获取用户列表.
        this.getDataList("again");
        this.getUsers();
      }
    );
    Date.prototype.Format = function(fmt) {
      var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        S: this.getMilliseconds()
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1 ?
            o[k] :
            ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    };
    //初始化日期控件
    var now = new Date();
    var lastDay = new Date(now.getTime() - 3600000 * 24);
    this.beginTime = lastDay.Format("yyyy-MM-dd");
    this.startTime = lastDay.Format("yyyy-MM-dd");
    this.endTime = now.Format("yyyy-MM-dd");
  },
  methods: {
    show: function(str) {
      this.eventType = str;
      this.isSearch = false;
      if (str == "all") {
        this.eventType = "all";
      } else if (str == "open") {
        this.eventType = 1;
      } else if (str == "danger") {
        this.eventType = 2;
      } else if (str == "tip") {
        this.eventType = 3;
      } else if (str == "un") {
        this.eventType = 10;
      }
      this.getDataList("again");
    },
    showMore: function(index) {
      console.log("showMore");
      if (index == 1 && this.flag == true) {
        this.pageNum++;
        this.getDataList("more");
      }
    },
    showSearch: function() {
      this.isSearch = true;
    },
    getUsers: function() {
      this.$http({
        url: "http://iot.malanco.com/getUsers",
        method: "POST"
      }).then(response => {
        this.userArray = response.data;
      }, response => {

      })
    },
    getDataList: function(type) {


      if (type == "again") {
        this.pageNum = 1;
      } else if (type == "more") {}
      var pageNum = this.pageNum;
      var pageSize = this.pageSize;

      var startTime1 = this.startTime + " 00:00:00";
      var endTime1 = this.endTime + " 23:59:59";
      var queryData = {
        "startTime": startTime1,
        "endTime": endTime1
      };
      if (this.eventType != "all") {
        queryData.eventType = this.eventType;
      }

      this.$http({
        url: "http://iot.malanco.com/eventPage?pageNum=" +
          pageNum +
          "&pageSize=" +
          pageSize,
        method: "POST",
        headers: {
          "Content-Type": "application/json; charset=utf-8"
        },
        data: JSON.stringify(queryData)
      }).then(response => {
        if ((response.data.success = "true")) {
          this.dataList = response.data.data.list;
          if (this.dataList.length == 0) {
            this.$vux.toast.show({
              text: "没有更多数据了"
            });
          }
          if (this.dataList.length < 5) {
            this.flag = false;
          } else if (this.dataList.length == 5) {
            this.flag = true;
          }
        }
      }, response => {
        var message = response.response.data.exceptionObj.message;
        this.$vux.toast.show({
          type: "warn",
          text: message
        })
      });
    },
    getCreateTime1: function(item) {
      return new Date(item.createTime)
        .Format("yyyy-MM-dd hh:mm:ss")
        .slice(0, 10);
    },
    getCreateTime2: function(item) {
      return new Date(item.createTime)
        .Format("yyyy-MM-dd hh:mm:ss")
        .slice(11);
    },
    getEvent: function(item) {
      if (item.eventType == 1) {
        return "开门";
      } else if (item.eventType == 2) {
        return "报警";
      } else if (item.eventType == 3) {
        return "提醒";
      } else if (item.eventType == 10) {
        return "安防";
      }
    },
    getThings: function(item) {
      var weixinRemoteOpenDoorEventType = 101;
      var subEvent = this.getSubEvent(item);
      //主事件类型是开门 并且 次事件类型  不是 微信远程开锁


      if (item.eventType == 1 && item.subEventType != weixinRemoteOpenDoorEventType) {
        var userName = this.getOpenDoorUserName(
          item.eventType,
          item.subEventType,
          item.content
        );
        if (userName != null && userName != "") {
          return (subEvent += "," + userName + "回家了");
        } else {
          return (subEvent +=
            "," + (item.content != null ? item.content : "") + "回家了");
        }
      } else {
        return subEvent;
      }
    },
    getSubEvent: function(pd) {
      var subEvent = "";
      if (pd.subEventType == 1) {
        subEvent = "指纹开门";
      } else if (pd.subEventType == 2) {
        subEvent = "密码开门";
      } else if (pd.subEventType == 3) {
        subEvent = "卡开门";
      } else if (pd.subEventType == 4) {
        subEvent = "钥匙开门";
      } else if (pd.subEventType == 5) {
        subEvent = "遥控开门";
      } else if (pd.subEventType == 6) {
        subEvent = "智能锁被撬";
      } else if (pd.subEventType == 7) {
        subEvent = "强行开门";
      } else if (pd.subEventType == 8) {
        subEvent = "指纹开锁被冻结";
      } else if (pd.subEventType == 9) {
        subEvent = "密码开锁被冻结";
      } else if (pd.subEventType == 10) {
        subEvent = "卡开锁被冻结";
      } else if (pd.subEventType == 11) {
        subEvent = "钥匙开锁被冻结";
      } else if (pd.subEventType == 12) {
        subEvent = "遥控开锁被冻结";
      } else if (pd.subEventType == 13) {
        subEvent = "低电量电压";
      } else if (pd.subEventType == 14) {
        subEvent = "忘拔钥匙";
      } else if (pd.subEventType == 15) {
        subEvent = "锁门提醒";
      } else if (pd.subEventType == 16) {
        subEvent = "敲门提醒";
      } else if (pd.subEventType == 17) {
        subEvent = "SOS提醒";
      } else if (pd.subEventType == 23) {
        subEvent = "布防";
      } else if (pd.subEventType == 24) {
        subEvent = "撤防";
      } else if (pd.subEventType == 101) {
        subEvent = "微信远程开锁";
      }
      return subEvent;
    },
    getOpenDoorUserName: function(eventType, subEvent, userCode) {
      if (eventType == 1) {
        var matchAddUsertype = subEvent - 1;
        if (this.userArray != null) {
          var userlength = this.userArray.length;
          for (var i = 0; i < userlength; i++) {
            var user = this.userArray[i];
            if (user.userCode == userCode && matchAddUsertype == user.type) {
              return user.userName;
            }
          }
        }
        return null;
      }
    },
    showDateTime: function() {
      var that = this;
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM-DD',
        value: that.beginTime,
        onConfirm(val) {
          that.startTime = val;
        },
        onShow() {},
        onHide() {}
      })
    },
    getMyDay: function(str) {
      var date = new Date(Date.parse(str.replace(/\-/g, "/")));
      var week;
      if (date.getDay() == 0) {
        week = "星期日"
      }
      if (date.getDay() == 1) {
        week = "星期一"
      }
      if (date.getDay() == 2) {
        week = "星期二"
      }
      if (date.getDay() == 3) {
        week = "星期三"
      }
      if (date.getDay() == 4) {
        week = "星期四"
      }
      if (date.getDay() == 5) {
        week = "星期五"
      }
      if (date.getDay() == 6) {
        week = "星期六"
      }
      return week;
    }
  }
};
</script>
<style lang="less">
.jiankong {
    .title {
        text-align: center;
        height: 40px;
        line-height: 40px;
        position: relative;
        .iconfont {
            position: absolute;
            right: 10px;
        }
    }
    width: 100%;
    height: 100%;
    position: relative;
    .zhezhao {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.1);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
        .search-tiaojian {
            background-color: #fff;
            width: 55px;
            position: absolute;
            right: 0;
            top: 35px;
            z-index: 22;
            li,
            ul {
                padding: 0;
                margin: 0;
            }
            li {
                list-style: none;
                text-align: center;
                height: 30px;
                border-bottom: 1px solid #ccc;
            }
            li:last-child {
                border: 0;
            }
        }
    }
}
.note {
    position: relative;
    .lineBox {
        position: absolute;
        left: 84px;
        z-index: 22;
        .line {
            height: 48px;
            width: 1px;
            background-color: #ccc;
            position: relative;
            .round {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #c9caca;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .more {
            .round {
                width: 15px;
                height: 15px;
                top: 0;
                transform: translate(-50%, 0);
                background-color: #8dcae2;
                position: relative;
                .iconfont {
                    color: #ffffff;
                    font-size: 20px;
                    position: absolute;
                    top: 50%;
                    left: 52%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    .note-item {
        display: flex;
        font-size: 12px;
        display: flex;
        align-items: center;
        position: relative;
        .date {
            flex-grow: 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 80px;
            padding: 5px 2px;
            flex-shrink: 0;
            // border-right: 1px solid #ccc;
        }

        .type {
            flex-grow: 1;
            color: #8dcae2;
        }
        .note-content {
            padding-left: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

}
</style>
